 
<template>
  <el-form-item class="el-form-item" prop="captcha">
    <div class="captcha-container el-input el-input--prefix el-input--suffix text ">
      <!--  :placeholder="'请输入验证码  el-input el-input--prefix el-input--suffix   v-model="model.captcha"'" -->
      <el-input id="captcha" class="captcha-input text common-input "  v-model="internalCaptcha" prefix-icon="search"
        :placeholder="$t('login.captcha')" clearable></el-input>
      <!-- 使用 v-html 显示 SVG 验证码 -->
      <div v-if="captchaSvg" v-html="captchaSvg" class="captcha-svg"></div>
      <!-- 刷新按钮 -->
      <el-button class="captcha-refresh-btn el-button el-button--primary el-button-primary btn" type="primary"
        icon="refresh" :placeholder="$t('login.refresh')" @click="refreshCaptcha" size="small">
        {{ $t('login.refresh') }}
      </el-button>
    </div>
  </el-form-item>
</template>

<script>
export default {
  props: {
    modelValue: String,
  },
  emits: ['update:modelValue'],
  data() {
    return {
      model: {
        captcha: '', // 用户输入的验证码
      },
      captchaUrl: '', // 验证码图片的URL
      captchaSvg: '', // 用于存储 SVG 字符串
    }
  },
  methods: {
    // 请求并保存 sessionId  必须在调用之前
    setSessionId() {
      console.log('开始请求id')
      return new Promise((resolve, reject) => {
        // 请求生成 sessionId 并写入 Cookie
        this.$axios
          .get('/api/setcookid')
          .then(response => {
            if (response.data.code === 200) {
              console.log('请求sessionId成功', response.data)
              // 保存 sessionId 到 localStorage
              localStorage.setItem('sessionId', response.data.data.sessionId)
              resolve() // sessionId 保存成功，继续后续请求
            } else {
              this.$message.error('获取 sessionId 失败')
              reject('获取 sessionId 失败')
            }
          })
          .catch(error => {
            this.$message.error('请求 sessionId 失败')
            reject('请求 sessionId 失败')
          })
      })
    },

    // 加载验证码
    loadCaptcha() {
      const sessionId = localStorage.getItem('sessionId') // 获取前端存储的 sessionId

      if (!sessionId) {
        // console.log('没本地ID')
        // 如果没有 sessionId，先获取并保存 sessionId
        this.setSessionId()
          .then(() => {
            // 获取 sessionId 后再加载验证码
            this.fetchCaptcha();
          })
          .catch(err => {
            console.log(err) // 如果获取 sessionId 失败，不再继续获取验证码
          })
      } else {
        // console.log('有本地ID', sessionId)
        // 如果已有 sessionId，直接加载验证码
        this.fetchCaptcha();
      }
    },

    // 获取验证码的具体请求
    fetchCaptcha() {
      const sessionId = localStorage.getItem('sessionId') // 确保有 sessionId
      console.log('开始请求验证码')

      // 发送请求获取验证码图片
      this.$axios
        .get('/api/captcha', { params: { sessionId } })
        .then(response => {
          // console.log('验证码接口返回:', response.data)
          if (response.data.code === 200) {
            this.captchaUrl = response.data.data.image // 设置验证码图片URL
            this.captchaSvg = response.data.data.image; // 假设返回的 SVG 存储在 data.image 中
            // console.log('设置的 captchaUrl:', this.captchaUrl);
          } else {
            this.$message.error('获取验证码失败')
          }
        })
        .catch(error => {
          this.$message.error('请求验证码失败')
        })
    },

    // 刷新验证码
    refreshCaptcha() {
      this.loadCaptcha() // 刷新验证码时重新加载
    },




  },
  created() {
    this.loadCaptcha(); // 初始加载验证码
  },
  mounted() {
    this.$nextTick(() => {
      const svgElement = this.$el.querySelector('.captcha-svg svg');
      if (svgElement) {
        svgElement.style.width = '100%';
        svgElement.style.height = '100%';
        svgElement.style.lineHeight = '46px';
        svgElement.style.maxHeight = '46px';
        svgElement.style.margin = '0 auto';
        svgElement.style.padding = '2';
      }

    });

    
  },
  computed: {
    internalCaptcha: {
      get() {
        return this.modelValue;
      },
      set(value) {
        this.$emit('update:modelValue', value);
      },
    },
  },


}


</script>

<style lang="scss" scoped>


.captcha-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 48px;
  height: 48px;

  /* 添加验证码图片样式 */
  .captcha-image {
    height: 46px;
    margin-right: 10px;
    vertical-align: middle;
  }

  .captcha-svg {
    width: 120px;
    /* 设置宽度 */
    max-height: 46px;
    /* 高度自动调整以保持比例 */
    margin: 0 auto;
    /* 添加顶部外边距 */
    line-height: 46px;

    // border: 1px solid #ccc; /* 添加边框 */
    border-radius: 4px;
    /* 添加圆角 */
    padding: 0;

    svg {
      height: 100%;
      width: 100%;
      line-height: 46px;
      max-height: 46px;
      margin: 0 auto;
      padding: 0px;
    }
  }
}


.el-input__prefix {
  background: blue;
}

.captcha-input {
  width: 70%;
  line-height: 48px;
  height: 48px;
  font-family: 'Helvetica', 'Arial', sans-serif;
  /* background-color: rgba(0, 31, 61, 0.1); */
  color: white;
  border: gray;


}

#captcha {
  color: white;
  background: while;

}

.captcha-refresh-btn {
  width: 25%;
  line-height: 48px;
  height: 46px;
  /* opacity: 0.5; */
  /* color: white; */

  background-color: rgba(0, 31, 61, 0.35);

  color: white;
  border: gray;


}

.captcha-refresh-btn:hover {
  color: white;
  background-color: rgba(0, 31, 161, 1);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  /* 悬浮时阴影更大 */
  transform: translateY(-1px);
  /* 向上浮动的效果 */
}

.captcha-refresh-btn:active {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* 点击时阴影变小 */
  transform: translateY(1px);
  /* 向下挤压的效果 */

}

.captcha-container .captcha-input .el-input__inner {
  color: #fff !important; /* 确保颜色为白色 */
}
::v-deep .captcha-container .captcha-input .el-input__inner {
  color: #fff !important;
}

</style>